<template>
    <div style="padding-bottom: 60px;">
        <Card dis-hover >
            <Row :gutter="8" class="ivu-mb-8">
                <!-- :options="options" -->
                <Col>
                <Select v-model="params.project_id" v-width="200" placeholder="所有项目" clearable @on-change="askData">
                    <Option v-for="item in projectList" :value="item.project_id" :key="item.project_id">{{ item.name }}</Option>
                </Select>
              </Col>
                <Col style="color:#ff9900;line-height:40px;"><Icon type="md-alert" color="#ff9900"></Icon>2022年7月26日前数据不完善，不参与数据匹配</Col>
            </Row>
            <Row :gutter="8" class="ivu-mb-8">
                <Col span="12">
                <Card dis-hover >
                    <h3 class="ivu-mb-8">匹配词报告</h3>
                    <Row :gutter="8" class="ivu-mb-8">
                        <Col>
                        <DatePicker type="daterange" 
                                    v-model="params.arrdate" 
                                    class="ivu-mr-8"
                                    @on-change="changeParams"  
                                    placeholder="请选择时间段" 
                                    v-width="200"
                                    :clearable="false"
                                    :options="options1"
                        ></DatePicker>
                        </Col>
                        <Col>
                        <Button type="primary" @click="exportData" v-hasC="{
                            name: '-v1-search-search-export-report',
                            flag: '/v1/search/search/export-report',
                        }">导出</Button>
                        </Col>
                    </Row>
                    <Table border :columns="matchColumns" :data="matchData" max-height="600" > </Table>
                </Card>
                </Col>
                <Col span="12">
                <Card dis-hover >
                    <h3 class="ivu-mb-8">专业词报告</h3>
                    <Row :gutter="8" class="ivu-mb-8">
                        <Col>
                        <DatePicker type="daterange" 
                                    v-model="params.date" 
                                    class="ivu-mr-8"
                                    @on-change="changeMajor"  
                                    placeholder="请选择时间段" 
                                    v-width="200"
                                    :clearable="false"
                                    :options="options1"
                        ></DatePicker>
                        </Col>
                        <Col>
                        <Button type="primary" @click="majorexportData" v-hasC="{
                            name: '-v1-search-search-export-report2',
                            flag: '/v1/search/search/export-report',
                        }">导出</Button>
                        </Col>
                    </Row>
                    <Table border :columns="majorColumns" :data="majorData" max-height="600" ></Table>
                </Card>
              </Col>
            </Row>
        </Card>

    </div>
</template>
<script>
    import { matchingSearch,specialtySearch,searchexport } from '@/api/hqapi';
    import dayjs from 'dayjs';
    export default {
        data(){
            return {
                params: {project_id: '',date: [],arrdate: []},
                
                options1: {
                    disabledDate(date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                projectList: [],
                matchColumns: [
                    {
                        title: '编号',
                        width: 80,
                        render: (h, params) => {
                            // console.log(params.row.seq,'params.row.seq');
                            return h('span', params.row.seq ? params.row.seq : params.index + 1); 
                        }
           
                    },
                    {
                        title: '匹配词',
                        align: 'center',
                        key: 'keyword',
                        minWidth: 100,

                    },
                    {
                        title: '出现次数',
                        align: 'center',
                        key: 'count',
                        minWidth: 100,

                    },
                    {
                        title: '开口数',
                        align: 'center',
                        key: 'sendCount',
                        minWidth: 100,

                    }
                ],
                matchData: [],
                majorColumns: [
                    {
                        title: '编号',
                        width: 80,
                        render: (h, params) => {
                            // console.log(params.row.seq,'params.row.seq');
                            return h('span', params.row.seq ? params.row.seq : params.index + 1); 
                        }
                        
           
                    },
                    {
                        title: '专业词',
                        align: 'center',
                        key: 'keyword',
                        minWidth: 100,

                    },
                    {
                        title: '出现次数',
                        align: 'center',
                        key: 'count',
                        minWidth: 100,

                    },
                    {
                        title: '开口数',
                        align: 'center',
                        key: 'sendCount',
                        minWidth: 100,

                    }
                ],
                majorData: []
            };
        },
        mounted() {
            this.params.date = [this.$Date(`${this.$Date().format('YYYY-MM')}-1`),this.$Date()];
            this.params.arrdate = [this.$Date(`${this.$Date().format('YYYY-MM')}-1`),this.$Date()];
            this.initial();
        },
        methods: {
            initial() {
                this.projectList = JSON.parse(localStorage.getItem('project'));
                this.askData();
            },
            askData(){
                this._getmatching();
                this._getspecialty();
            },
            // 获取匹配词列表
            _getmatching(){
                const params = {
                    project_id: this.params.project_id,
                    start_time: dayjs(this.params.arrdate[0]).format('YYYY-MM-DD'),
                    end_time: dayjs(this.params.arrdate[1]).format('YYYY-MM-DD'),
                };
                matchingSearch(params).then(res => {
                    const cc = {
                        seq: '总计',
                        count: res.countAll,
                        sendCount: res.sendCountAll,
                        keyword: res.keyCount + '组'
                    };
                    const arr = res.list;

                    arr.push(cc); 
                    this.matchData = arr;
                    // console.log(arr);
                });

            },
            // 获取专业词列表
            _getspecialty(){
                const params = {
                    project_id: this.params.project_id,
                    start_time: dayjs(this.params.date[0]).format('YYYY-MM-DD'),
                    end_time: dayjs(this.params.date[1]).format('YYYY-MM-DD'),
                };
                specialtySearch(params).then(res => {
                    const cc = {
                        seq: '总计',
                        count: res.countAll,
                        sendCount: res.sendCountAll,
                        keyword: res.keyCount + '组'
                    };
                    const arr = res.list;

                    arr.push(cc); 
                    this.majorData = arr;
                });

            },
            // 日期下拉选择
            changeParams(){
                this._getmatching();
            },
            changeMajor(){
                this._getspecialty();
            },
            exportData(){
                const params = {
                    type: 1,
                    project_id: this.params.project_id,
                    start_time: dayjs(this.params.arrdate[0]).format('YYYY-MM-DD'),
                    end_time: dayjs(this.params.arrdate[1]).format('YYYY-MM-DD'),
                };
                searchexport(params).then(res => {
                    this.createExecl(res, '专业词报表.xlsx');
                });
            },
            majorexportData(){
                const params = {
                    type: 2,
                    project_id: this.params.project_id,
                    start_time: dayjs(this.params.arrdate[0]).format('YYYY-MM-DD'),
                    end_time: dayjs(this.params.arrdate[1]).format('YYYY-MM-DD'),
                };
                searchexport(params).then(res => {
                    this.createExecl(res, '匹配词报表.xlsx');
                });
            },
            createExecl(res, fileName) {
                let applicationType = {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                };
                let blob = new Blob([res], applicationType);
                // 错误处理
                let _this = this;
                if (res.type !== applicationType.type) {
                    const fileReader = new FileReader();
                    fileReader.readAsText(blob, 'utf-8');
                    fileReader.onload = function () {
                        let msg = JSON.parse(fileReader.result);
                        _this.$Message.error({
                            content: msg.message,
                            duration: 3,
                        });
                    }
                    return;
                }
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.download = fileName; // 下载的文件名
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    };
</script>